<template>
	<view class="classify-box p-25">
		<view class="item-box" v-for="item,index in props.data" :key="index" @click="handleGoCategory(item.id)">
			<image class="img" :src="item.imageUrl" mode="aspectFill"></image>
			<view class="title p-b-5">{{ item.name }}</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import type { CategoriesType } from '@/core/models';
	import { handleRouteNavigateTo } from '@/core/utils';

	const props = withDefaults(defineProps<{
		data : Array<CategoriesType>,
	}>(), {
		data: () => [],
	});

	const handleGoCategory = (id : number) => {
		handleRouteNavigateTo(`/pages/category/category?catId=${id}`)
	}
</script>

<style lang="scss" scoped>
	@import './classify-two.scss';
</style>